<template>
  <div class="MyEnshrine" :class="{smallFontSize:showEdition,mediumFontSize:!showEdition}">
    <div class="SQList">
      <van-tabs title-active-color="#3F8FFC" color="#3F8FFC" title-inactive-color="#000" v-model="active">
        <van-tab title="工匠收藏">

          <div style="height: 60vh;text-align:center;padding-top: 20vh;" v-if="contentData.length==0">
            <div style="margin-bottom: 10px;">
              <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
            </div>
            <div>暂无数据</div>
          </div>
          <div class="content" v-if="contentData.length>0">
            <ul>
              <li v-for="(item,index) in contentData" @click="contentClick(item)" :key="index">
                <div class="yuanPhoto">
                  <span style="color:#fff;">{{(item.artisanName?item.artisanName.substring(1):'无')}}</span>
                </div>
                <div style="width: 64%;margin-left:20px">
                  <p style="height: 40px;line-height: 40px;">
                    <span>{{item.artisanName}}</span>
                    <span style="float: right;">
                      <img
                        v-for="(item,index) in Number(item.starLevel)"
                        src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/GJFW/16.png"
                        :key="index"
                      />
                    </span>
                  </p>
                  <p style="height: 40px;line-height: 40px;">
                    <span>点赞量：{{item.praiseNum}}</span>
                    <span style="float: right;">签约量：{{item.signNum}}次</span>
                  </p>
                  <p style="height: 40px;display: flex;align-items: center;">
                    <span style="width: 65%;margin-right:10%">服务区域：{{item.serviceArea}}{{item.belongCountry}}</span>
                    <span
                      v-if="item.workerType"
                      style="float:right;color: #30C47A;width: 54px;height: 31px;background:rgba(48, 196, 122, 0.1);border-radius: 4px;display: inline-block;line-height: 31px;text-align: center;"
                    >{{item.workerType}}</span>
                  </p>
                </div>

              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="图集收藏">
          <div>
            <div style="height: 60vh;text-align:center;padding-top: 20vh;" v-if="imagesList.length==0">
              <div style="margin-bottom: 10px;">
                <img src="https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/DSF/50.png" />
              </div>
              <div>暂无数据</div>
            </div>
            <template v-if="imagesList.length>0">
              <div class="boxser" v-for="item in imagesList" :key="item" @click="handleGoto(item)">
                <p v-if="item.suolueFileId">
                  <img width="186" height="116" :src="baseurlid + item.suolueFileId" alt />
                </p>
                <p v-else>
                  <img width="186" height="116" src="https://nfzjszlb.jst.zj.gov.cn/tyzcpt/api/upload/oss/preview?fileId=3e7acb97b640411a9ce06017e7c12964"/>
                </p>
                <div style="padding:10px">
                  <p>{{item.floors?item.floors:0}} |{{item.area?item.area:0}}m²</p>
                  <p style="font-weight:800">{{item.atlasName}}</p>
                  <p style="margin-left:4px;">
                    <span style="font-weight:640">{{item.atlasStyle}}</span>
                    <span v-if="item.atlasType!=null" style="font-weight:640;float:right" @click="vrSee(item)">VR图集</span>
                    <span v-else style="font-weight:640;float:right">通用图集</span>
                  </p>
                </div>
              </div>
            </template>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <div class="bottom">
      <ul>
        <li
          v-for="(item, index) in bottomData"
          @click="bottomClick(index)"
          :style="{ color: nowIndex === index ? '#007AFF' : '#908f94',fontSize:'18px' }"
          :key="index"
        >
          <img v-if="nowIndex === index" :src="item.icon" />
          <img v-else :src="item.icons" />
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import { ArtisanCollection, AtlasCollection, QuerySignCallback } from '@/utils/api'
export default {
  data() {
    return {
      nowIndex: 2,
      showEdition: true,
      active: 2,
      baseurl: window.g.BaseURL4,
      baseurlid:window.g.OSSPriviewId,
      iamgeList: [

      ],
      imagesList: [

      ],
      contentData: [

      ],
      value: '',
      ConditionalFiltering: [

      ],
      bottomData: [
        {
          name: '首页',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20.png',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/20-1.png'
        },
        // {
        //   name: '我的待办',
        //   icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21.png',
        //   icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/21-1.png'
        // },
        {
          name: '我的收藏',
          icons: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22.png',
          icon: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/22-1.png'
        }
      ]
    }
  },
  mounted() {
    this.getGJ()
    this.getTJ()
    this.showEdition = this.$store.state.Edition
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: '我的收藏'
      })
        .then(res => {
        })
        .catch(err => {
        })
    }
  },
  methods: {
    getGJ: async function (data) {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        appKey: "6738b790-69e8-11ec-a673-6805cab640a0",
        userId: (window.localStorage.getItem("ISZHUCE")),
        pageNo: 1,
        pageSize: 1000
      }
      const res = await ArtisanCollection(params)
      if(res.data.data == null || res.data.data == 'null'){
        this.contentData = []
        return
      }
      res.data.data.pageList && res.data.data.pageList.length > 0 ? (this.contentData = res.data.data.pageList) : ''
      console.log(this.contentData,'hezhilong')
    },
    getTJ: async function (data) {
      let params = {
        accessCode: '29ff26f660fc47f79c15bff382eeca6d',
        appKey: "6738b790-69e8-11ec-a673-6805cab640a0",
        userId: (window.localStorage.getItem("ISZHUCE")),
        pageNo: 1,
        pageSize: 1000
      }
      const res = await AtlasCollection(params)
      if(res.data.data == null || res.data.data == 'null'){
        this.imagesList = []
        return
      }
      res.data.data.pageList && res.data.data.pageList.length > 0 ? (this.imagesList = res.data.data.pageList) : ''
    },
    //vr图集预览1
    vrSee(item) {
      if (item.vrUrl) {
        let url = window.g.VrUrl + item.vrUrl
        if (ZWJSBridge) {
          ZWJSBridge.openLink({
            url: url
          })
            .then(res => {
            })
            .catch(err => {
            })
        }
      } else {
        this.$notify({ type: 'info', message: '暂未配置！' })
      }
    },
    contentClick(item) {
      this.$router.push({
        name: 'CraftsmanDetails',
        query: {
          data1: JSON.stringify(item),
          id: this.$route.query.id
        }
      })
      this.$store.commit('getGJQY', item)
    },
    handleGoto(data) {
      this.$router.push({
        path: '/PhotoThreePage',
        query: {
          data1: JSON.stringify(data),
          id: this.$route.query.id
        }
      })
    },
    bottomClick:async function(index) {
      this.nowIndex = index
      this.ISShowList = true
      switch (index) {
        case 0:
           this.$router.push({
              path: "/ZLJIndex",
          });
          break
        case 1:
            //获取数据长度
          // this.getcontentData();
          let showType = window.localStorage.getItem("userType");
          if (showType != "QY") {
            this.$router.push({
              path: "MyAgent",
            });
          } else {
            //企业我的待办分为鉴定公司447(同危改待办)  测绘企业448  建筑企业446(同工匠建房待办)
            let formData = JSON.parse(window.localStorage.getItem("FRUSER"));
            let paerauto = {
              procName: "up_companyFwlx",
              dtParams: JSON.stringify([
                { I_TYXYDM: "'" + formData.uniscid + "'" },
              ]),
              token: window.localStorage.getItem("token"),
            };
            let procNameAuto = {
              accessCode: "69db6bece3a7480592e2ec753d1e335e",
              cityCode: window.localStorage.getItem("citycode")
                ? window.localStorage.getItem("citycode")
                : "441300000000",
              params: paerauto,
            };
            const res = await QuerySignCallback(procNameAuto);
            let data = eval("(" + res.data.data + ")").Data;
            if (data.length > 0) {
              switch (data[0].FWLX) {
                case 447:
                  this.$router.push({
                    path: "/RebuildList",
                  });
                  break;
                case 446:
                  this.$store.commit("getIsGJ", false);
                  this.$router.push({
                    path: "/BuildingApplication",
                  });
                  break;
                case 448:
                  this.$router.push({
                    path: "/CHMyTodoList",
                  });
                  break;
                default:
                  break;
              }
            }
          }
          break
        case 2:
          if (ZWJSBridge) {
            ZWJSBridge.setTitle({
              title: '我的收藏'
            })
              .then(res => {
              })
              .catch(err => {
              })
          }
          break
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.MyEnshrine {
  height: 100vh;
  /*}*/
  /*height: calc(100vh - 60px);*/
  overflow: hidden;
  background: #fff;

  .SQList {
    width: 100vw;
    overflow-x: hidden;
    height: calc(100vh - 58px);
    overflow-y: auto;
    background: #fff;
    /*font-size: 14px;*/
    .title {
      width: 100%;
      height: 50px;
      background: #007aff;
      line-height: 50px;
      text-align: center;
      color: #ffffff;
      font-size: 20px;
      position: relative;
    }

    .content {
      clear: both;
      height: calc(100vh - 100px);
      // overflow: auto;
      padding: 10px;
      .yuanPhoto {
        height: 100px;
        width: 100px;
        border-radius: 100px;
        position: relative;
        background: #3f8ffc;
        span {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: 18px;
        }
      }
      ul li {
        height: 150px;
        border-bottom: 1px solid #d2d2d2;
        display: flex;
        align-items: center;
        position: relative;
      }
    }

    .boxser {
      width: 45%;
      height: auto;
      // border: 1px solid #aaa;
      box-shadow: 10px 10px 20px 10px #eee;
      float: left;
      margin: 1.5% 1.5% 1.5% 3%;
      border-radius: 10px;

      img {
        width: 100%;
      }
    }

    .photoList {
      display: flex;
      justify-content: space-between;
      height: 80px;
      padding: 10px;
      border-bottom: 1px solid #eee;

      .left {
        width: 20%;
      }

      .middle {
        padding-left: 4px;
        width: 48%;
        line-height: 20px;
      }

      .right {
        width: 32%;
        line-height: 20px;
        padding-left: 10px;

        .rightBottom {
          width: 34px;
          height: 21px;
          background-color: rgba($color: #30c47a, $alpha: 0.4);
          border-radius: 5px;
          line-height: 21px;
          text-align: center;
          margin-left: 46px;
          color: #30c47a;
        }
      }
    }
  }

  .bottom {
    clear: both;
    position: fixed;
    bottom: 0;
    // height: 100px;
    width: 100%;
    text-align: center;
    background: #ffffff;
    border-top: 1px solid #d2d2d2;
    ul {
      width: 100%;
      height: 58px;
      clear: both;
      overflow: hidden;
      display: flex;
      // align-items: center;
      margin-top: 4px;
      li {
        float: left;
        width: 50%;
        font-size: 14px !important;
        img {
          height: 16px;
          margin-bottom: 6px;
        }
      }
    }
  }
}
</style>
